<template>
  <div>
      <Banner/>
      <Process/>
      <Fall :list="allGoodsList"/>
  </div>
</template>

<script>
import Banner from './Banner'
import Fall from './Fall'
import { mapState,mapGetters } from "vuex";
export default {
    name:'Home',
    data() {
        return {
            timer:null,
            allGoodsList:[]
        }
    },
    components:{
        Banner,
        Fall
    },
    mounted() {
        //派发action：通过Vuex发起ajax请求
        this.$store.dispatch("getCommodityList");
        this.$store.dispatch("getGoodsList");
        console.log("a",this.$store,this.$store.getters.getAllgoods)
        this.allGoods()
    },
    beforeDestroy() {
        clearTimeout(this.timer)
    },
    methods: {
        allGoods(){
            this.timer = setTimeout(()=>{
                this.allGoodsList = this.$store.getters.getAllgoods
                // console.log("商品所有值:",this.allGoodsList,this.$store.getters.getAllgoods)
            },100)
        }
    },
    computed: {
        // 获取商品信息
        ...mapState({
          commodityList: (state) => state.home.commodityList,
        }),
        ...mapGetters(["getAllgoods"]),    
    },
}
</script>

<style>

</style>